// 改变显示当前城市
function changeCity(e) {
	var nowCity = document.getElementById("nowCity")
	nowCity.innerHTML = e.innerHTML
	localStorage.nowcity = e.innerHTML
}
// 给所有城市加移入事件
function inCity(e){
	e.style.color = "#4369b0"
	e.style.fontSize = "16px"
	e.style.cursor = "pointer"
}
// 给所有城市加移出事件
function outCity(e){
	e.style.color ="#666"
	e.style.fontSize = "10px"
}
// 给字母加的click事件
function getSpan(e) {
	var tagSpan = document.getElementsByClassName("tagSpan")[0]
	tagSpan.style.backgroundColor = "#d6ebff"
	for (var i = 0; i < e.parentNode.childNodes.length; i++) {
		if (e.parentNode.childNodes[i].nodeName == "SPAN") {
			e.parentNode.childNodes[i].style.backgroundColor = "#d6ebff"
		}
	}
	e.style.backgroundColor = "#eee"

	var showSpan = document.getElementsByClassName("showTag")
	for (var i = 0; i < showSpan.length; i++) {
		if (showSpan[i].innerHTML !== e.innerHTML) {
			showSpan[i].parentNode.style.display = "none"
		} else {
			showSpan[i].parentNode.style.display = "block"
		}
	}
}
function showAllCity(){
	var showDiv = document.getElementsByClassName("title")
	var showTag = document.getElementsByClassName("tag")
	for(var j=0;j<showTag.length;j++){
		showTag[j].style.backgroundColor = "#d6ebff"
	}
	for (var i = 0; i < showDiv.length; i++) {
		showDiv[i].style.display = "block"
	}
}
function showAll(e) {
	var showTagSpan = document.getElementsByClassName("tag")
	for(var j=0;j<showTagSpan.length;j++){
		showTagSpan[j].style.backgroundColor = "#d6ebff"
	}
	e.style.backgroundColor = "#eee"
	var showDiv = document.getElementsByClassName("title")
	for (var i = 0; i < showDiv.length; i++) {
		showDiv[i].style.display = "block"
	}
}
window.onload = function() {
	
	// 按照省份加载数据
	function getProvince(data) {
		var showProAbc = document.getElementById("showProvinceAbc")
		var abcHtml = "";
		var abcArr = []
		var showPro = document.getElementById("showProvincePro")
		var html = "";
		for (var i = 0; i < data.length; i++) {
			if(abcArr.indexOf(data[i].letter[0]) == -1){
				abcArr.push(data[i].letter[0])
			}
			
			var tag = data[i].letter[0]
			var city = data[i].city
			html += "<div class='title'><span class='showTag' id='showProTag'>" + tag + "</span>" +
				"<span class='showTitle'>" + data[i].name + ":</span>" +
				"<div class='sheng'>"
			for (var j = 0; j < city.length; j++) {
				html += "<span class='proCity' onclick='changeCity(this)' onmouseenter='inCity(this)' onmouseleave='outCity(this)'>" + city[j].name + "</span>"
			}
			html += "</div></div>"
		}
		for(var m=0;m<abcArr.length;m++){
			abcHtml += "<span class='tag' onclick='getSpan(this)' onmouseenter='inCity(this)'>"+abcArr[m]+"</span>"
		}
		abcHtml += "<span class='tag tagSpan' onclick='showAll(this)' onmouseenter='inCity(this)''>All</span>"
		showProAbc.innerHTML = abcHtml
		
		showPro.innerHTML = html
	}
	function getCitydata(data) {
		var cityAbc = [];
		var cityList = [];
		for(var k=0;k<data.length;k++){
			for(var m=0;m<data[k].city.length;m++){
				if(cityAbc.indexOf(data[k].city[m].letter[0]) == -1){
					cityAbc.push(data[k].city[m].letter[0])
				}
				var cityObj = {};
				cityObj.tag = data[k].city[m].letter[0];
				cityObj.name = data[k].city[m].name;
				cityList.push(cityObj)
				
			}
		}
		
		cityAbc.sort()
		var cityAbcHtml = "";
		var showCityAbc = document.getElementById("showCityAbc")
		for(var n=0;n<cityAbc.length;n++){
			cityAbcHtml += "<span class='tag' onclick='getSpan(this)' onmouseenter='inCity(this)'>"+cityAbc[n]+"</span>"
		}
		cityAbcHtml += "<span class='tag tagSpan' onclick='showAll(this)' onmouseenter='inCity(this)'>All</span>"
		showCityAbc.innerHTML = cityAbcHtml
	
		var showCityPro = document.getElementById("showCityPro")
		var cityHtml =""
		for(var i=0;i<cityAbc.length;i++){
			var html = "<div class='title'><span class='showTag'>"+ cityAbc[i] + "</span><div class='sheng'>"
			for(var j=0;j<cityList.length;j++){
				
				if(cityList[j].tag == cityAbc[i]){
					html += "<span class='city' onclick='changeCity(this)' onmouseenter='inCity(this)' onmouseleave='outCity(this)'>" + cityList[j].name + "</span>"
				}
				
			}
			html += "</div></div>"
			cityHtml += html
		}
		showCityPro.innerHTML = cityHtml
		
		
	}
	var xhr = new XMLHttpRequest()
	xhr.open("GET", './json/data4.json', true)
	xhr.responseType = "json"
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && xhr.status == 200) {
			data = xhr.response.data
			getProvince(data)
			getCitydata(data)
		}
	}
	xhr.send()
	
	var flag = false;
	var province = document.getElementById("province")
	province.style.backgroundColor = "#666666"
	var city = document.getElementById("city")
	var provinceShow = document.getElementById("provinceShow")
	var cityShow = document.getElementById("cityShow")
	province.onclick = function() {
		this.style.backgroundColor = "#666666"
		city.style.backgroundColor = "#ddd"
		provinceShow.style.display = "block"
		cityShow.style.display = "none"
		flag = false;
		showAllCity()
	}
	city.onclick = function() {
		this.style.backgroundColor = "#666666"
		province.style.backgroundColor = "#ddd"
		provinceShow.style.display = "none"
		cityShow.style.display = "block"
		flag = true;
		showAllCity()
		
	}
	// local功能，显示当前城市
	var nowCity = document.getElementById("nowCity")
	if (localStorage.nowcity) {
		nowCity.innerHTML = localStorage.nowcity
	} else {
		nowCity.innerHTML = "北京市"
	}
	var search = document.getElementById("search")
	var uli = document.getElementsByClassName("showInputCity")[0]
	function addCity(value,uli){
		var allcity=document.getElementsByClassName('city');
		for(var c=0;c<allcity.length;c++){
			if(allcity[c].innerHTML.indexOf(value) ==0){
				var li=document.createElement('li');
				li.innerText=allcity[c].innerHTML;
				li.setAttribute('style','font-size:10px;\n' +
				    'color:#4369b0;');
				uli.appendChild(li);
			}
		}
	    
	}
	function liEvent(uli){
		var li=uli.children;
		for(var e=0;e<li.length;e++){
		    li[e].addEventListener('mouseenter',function(){
		        this.style.backgroundColor='#70DB93';
				this.style.cursor = "pointer";
				this.style.fontSize = "16px";
		    });
		    li[e].addEventListener('mouseout',function(){
		        this.style.backgroundColor='';
				this.style.fontSize = "12px";
		    });
		    li[e].addEventListener('click',function(){
// 		        cit('click','',this.innerText);
// 		        search.value=this.innerText;
// 		        localse(uli,this.innerText);
				search.value=this.innerText;
				localStorage.nowcity = this.innerText;
				changeCity(this)
		        uli.innerHTML='';
				
		    })
		}
	}
	search.onkeyup=function(e){
	    uli.innerHTML='';
	   if(search.value.length>0) {
	       addCity(search.value, uli);
		   if(uli.innerHTML!=''){
		        liEvent(uli);
		   }
	    }
	}
	search.addEventListener('keydown',function(e){
	    if(e.keyCode==13){
	        
	            search.value=uli.firstElementChild.innerText;
	            nowCity.innerHTML=uli.firstElementChild.innerText;
	            localStorage.nowcity = uli.firstElementChild.innerText;
	            changeCity(uli.firstElementChild)
				uli.innerHTML = "";
	    };
	});
	

	


}
